<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-3.2.1.js"></script> 
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

</head>
<body>
<center>
<h1>列表页面</h1>
	
	<div class="container" style="text-align: center;">
	
		<table  class="table table-bordered">
		  <tr>
		  	<td>ID</td>
		  	<td>用户名</td>
		  	<td>登录名</td>
		  	<td>性别</td>
		  	<td>账户创建日期</td>
		  	<td>登录状态</td>
		  </tr>
		  <c:forEach items="${info.list }" var="v">
			<tr>
				<td>${v.id }</td>
				<td>${v.userName }</td>
				<td>${v.loginName }</td>
				<td>
					<c:if test="${v.sex==1 }">
						男
					</c:if>
					<c:if test="${v.sex==0 }">
						女
					</c:if>
				</td>
				<td>
					<fmt:formatDate value="${v.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
				</td>
				<td>
					<c:if test="${v.loqinStatus==1 }">
						<button type="button"  class="btn btn-success"  >登录在线
					</c:if>
					<c:if test="${v.loqinStatus==0 }">
						<button type="button"  class="btn btn-danger" >离线
					</c:if>
				</td>
			</tr>
		  </c:forEach>
		</table>
	
		
	</div>
	 <div class="form-group">
	    <label for="password" class="col-sm-2 control-label"></label>
	    <div class="col-sm-2">
		     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >
			  	离/在线信息统计
			</button>
	    </div>
	    <div class="col-sm-4">
	    	<jsp:include page="page.jsp"></jsp:include>
	    </div>
  </div>

</center>
<!-- Button trigger modal -->


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       		<table border="1">
	<tr>
		<td colspan="10">总人数:${count }</td>
		
	</tr>
	<tr>	
		<td>
			<button type="button"   class="btn btn-primary" >在线百分比：${bfb }%</button>      
			
		</td>
		<td>
			在线人数:${integer }
		</td>
	</tr>
	<tr>	
		<td>
			<button type="button"   class="btn btn-primary" >离线百分比：${bfb2 }%</button>
		</td>
		<td>
			离线人数:${integer2 }
		</td>
	</tr>
</table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
	function goPage(pageNum) {
		location="list?pageNum="+pageNum;
	}
</script>
</body>
</html>